<template>
	<view class="app-setting">
		<!-- <u-navbar :is-back="true"
		:title="i18n.My_team"
		:background="background">
		</u-navbar> -->
		
		<u-navbar :is-back="false" :background="background" title-color="#ffffff"  :immersive="true"   titleWidth="350">
			<view class="menu">
				<!-- <i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i> -->
				<image src="/static//index/menu.png" mode="widthFix" lazy-load @tap.stop="shownavs"></image>
			</view>
			<view class="menu-right" slot="right">
				{{address_l || '-'}}
			</view>
		</u-navbar>
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/menu/logo.png" mode="widthFix" lazy-load></image>
				</view>
				
				<view class="nav-address">
					{{address_l || '-'}}
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="clickBullentin">
					<view class="nav-item-l">
						<image src="../../static/menu/ce-0.png" mode="widthFix"></image>首页
					</view>
					<i class="icon iconfont icon-xiayibu"></i>
					</view>
				
				<!-- <view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(88)">
				<view class="nav-item-l">	
					<image src="../../static/menu/ce-1.png" mode="widthFix"></image>抢单</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(5)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-2.png" mode="widthFix"></image>质押</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
					
					<!-- <view class="nav-item active" hover-class="hover-transform1" @tap.stop="">
					<view class="nav-item-l ">	
						<image src="../../static/menu/ce-3-1.png" mode="widthFix"></image>兑换</view>
						<i class="icon iconfont icon-xiayibu"></i></view> -->
						
						
						<view class="nav-item " hover-class="hover-transform1" @tap.stop="getQz(4)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-4.png" mode="widthFix"></image>团队</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
						
						
					
			<!-- 	<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><view class="nav-item-l"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
				
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(1)"><view class="nav-item-l"><image src="../../static/menu/ce-5.png" mode="widthFix"></image>我的</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(89)"><view class="nav-item-l"><image src="../../static/menu/ce-6.png" mode="widthFix"></image>公告</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
			</view>
		</u-popup>
		<view class="project-history" @tap.stop="getHistory">
			兑换记录
		</view>
		<view class="project-content">
			
			
			
			<block v-for="(item,index) in list" :key="index">
				<view class="project-i">
					<image :src="item.images" mode="widthFix"></image>
					<view class="project-i-b-t">
						{{item.title}}
					</view>
					<view class="project-i-b">
						<view class="project-i-b-l">
							
							<view class="project-i-b-i">
								<view class="project-i-b-i-c">
									{{item.usdt_num || 0}}.<text>0000</text>
								</view>
								<text>USDT</text>
							</view>
							<view class="project-i-b-i">
								<view class="project-i-b-i-c">
									{{item.rld_num || 0}}.<text>0000</text>
								</view>
								<text>USDT锁仓</text>
							</view>
						</view>
						<button @tap.stop="exchangeShops(item)">兑换</button>
					</view>
				</view>
			</block>
		</view>
		
		
		
		<u-top-tips ref="message" :type="types" zIndex="999" :navbar-height="statusBarHeight + navbarHeight">
		</u-top-tips>
		
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import {pageto, pageback, fetch, showToast} from "../../common/js/util.js"
	import {mapGetters, mapMutations} from 'vuex';
	import mixTree from '@/components/mix-tree/mix-tree';
	import Message from '@/components/common/message.vue';
	export default{
		data(){
			return{
				message:'',
				showMesageShow:false,
				background: '#21242D',
				showLoad:false,
				showNav:'false',
				address_l:'',
				page:1,
				list:[],
				noMore:false,
				usdt_balance:'',
				usdtdj_balance:'',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				types: '',
			}
		},
		onReachBottom(){
			this.getList()
		},
		computed:{
			formatParsefloat(val){
				if ((!val && val != 0) || val == null || val == undefined || val == 'undefined') {
					return 0
				}
				return parseFloat(val)
			},
			i18n () {  
				return this.$t('message')
			},
			...mapGetters([
				'getTextArr',
				'getLangType',
				'getLoginInfo',
				'getRequestUrl',
				'getInTeam'
			])
		},
		onShow(){
			this.address_l = this.phoneNumShow(this.getLoginInfo.address)
			// }
			this.page=1;
			this.list = []
			this.getList();
		},
		methods:{
			getHistory(){
				uni.navigateTo({
					url:'./history'
				})
			},
			clickBullentin() {
				clearInterval(this.timer)
				this.timer=null;
				this.timer=''
				uni.reLaunch({
					url:'../index/index'
				})
			},
			showTips(msg, type) {
				// <!-- type值可选的有primary(默认)、success、info、warning、error -->
				this.$refs.message.type = type
				this.$refs.message.show({
					title: msg
				});
			},
			exchangeShops(item){
				let _this = this 
					// if(Number(item.bj_tq_status!=1)){
						if(Number(item.usdt_num )>Number(_this.usdt_balance)){
							_this.showTips('USDT可用数量不足','success')
							return
						}
						if(Number(item.rld_num )>Number(_this.usdtdj_balance)){
							_this.showTips('USDT锁仓可用数量不足','success')
							return
						}
						// this.rld2_balance=res.data.data.rld2_balance
						// this.usdt2_balance=res.data.data.usdt2_balance
						
			          let message='兑换验证';
			          let address = _this.getLoginInfo.address;
			          ethereum.request({
			              method: "personal_sign",
			              params: [message, address],
			          }).then((signature) => {
							
							// _this.number = ''
							 fetch('/api/rules/dhdo', {shopid:item.id}, 'post').then(res => {
								_this.num=''
								if (res.data.code == 1) {
									_this.showTips(res.data.msg,'success')
									_this.page=1;
									_this.list = []
									_this.getList();
									}else{
										_this.showTips(res.data.msg,'error')
										// this.comfirm(1)
									}
									
								})
			              
			              //有这个值证明签名了  就可以进行提现操作了
			              //这里进行提现操作
			
			          })
			          .catch((err) => {
						_this.num = ''
			              // 异常  弹个窗
						_this.showTips(_this.getLangType=='en'?' 你无权使用':'你无权使用','success')
			//               alert('你无权使用');
			          });
						
						
						
					
					
					
					
				// }
				},
			getQz(index){
				this.showNav=false
				if(index==1){
					clearInterval(this.timer)
					this.timer=null;
					this.timer=''
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==5){
					uni.reLaunch({
						url:'/pages/wealth-treasure/wealth-treasure'
					})
					return
				}else if(index==3){
					
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}else if(index==4){
					uni.reLaunch({
						url:'/pages/team/team'
					})
					return
				}else if(index==89){
					uni.reLaunch({
						url:"/pages/new/notice"
					})
					return
				}
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
			},
			shownavs(){
				// console.log('q3eq2',this.showNav);
				this.showNav =true
			},
			phoneNumShow (info) {
				// let that = this;
				let number = info; //获取到手机号码字段
				let mphone = number.substring(0, 4) + '****' + number.substring(info.length-5,info.length);
				// that.tel = mphone
				return mphone
			},
			async getList() {
				await fetch('/api/rules/dhlist', {
					page: this.page,
					rows: 10
				}, 'post').then(res => {
					 
					if (res.data.code = 1) {
						this.usdt_balance=res.data.data.usdt_balance
						this.usdtdj_balance=res.data.data.usdtdj_balance
						// console.log('我zasd');
						if (res.data.data.list.length == 0) return;
						// console.log('我宰这里');
						this.noMore = false;
						
						let list = res.data.data.list
						list.forEach((item,index)=>{
							// item.day_sy_ = Number(item.day_sy)*100
							list[index].images = this.getRequestUrl+'/static/upload/image/'+item.pic
						})
						if (res.data.data.list.length < 10) {
							this.noMore = true;
						}
						if (this.page == 1) {
							this.list = list
						} else {
							this.list = this.list.concat(list)
						}
						
						console.log(this.list);
						this.page++
					}
					
			
				})
			},
		},
		components: {
		}
	}
</script>

<style lang="scss" scoped>
	.project-history{
		font-size: 24rpx;
		color: #F5C249;
		text-align: right;
		padding: 66rpx 30rpx 0;
		
	}
	.project-content{
		padding:42rpx 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		.project-i{
			width: 48%;
			background: #21242D;
			border-radius:8rpx;
			overflow: hidden;
			margin-bottom: 44rpx;
			&:nth-of-type(odd){
				margin-right: 18rpx;
			}
			display: flex;
			flex-direction: column;
			image{
				width: 100%;
			}
			.project-i-b-t{
				font-size: 26rpx;
				color: #F1EFEF;
				line-height: 28rpx;
				padding:24rpx 10rpx 14rpx;
			}
			.project-i-b{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 14rpx 16rpx 10rpx;
				.project-i-b-l{
					flex: 1;
					padding-right: 10rpx;
					.project-i-b-i{
						display: flex;
						align-items: center;
						position: relative;
						// justify-content: space-between;
						margin-bottom: 10rpx;
						&::after{
							content: "";
							position: absolute;
							left: 0;
							bottom:-10rpx;
							background: #80704C;
							width: 92rpx;
							height: 4rpx;
							border-radius: 20rpx;
						}
						text{
							font-size: 14rpx;
							color: #777D8A;
						}
						.project-i-b-i-c{
							color: $white;
							line-height: 36rpx;
							font-size: 28rpx;
							text{
								font-size: 20rpx;
							}
						}
					}
				}
				button{
					width: 90rpx;
					line-height: 80rpx;
					height: 80rpx;
					background: #F5C249;
					border-radius: 8rpx;
					color: $white;
					font-size: 20rpx;
					padding: 0;
					margin: 0;
				}
			}
			
			
			
			
		}
	}
	.nav-conte{
		width: 530rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: #21242D;
		.nav-log{
			// border: 1rpx solid #fff;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			image{
				width: 105rpx;
				height: 104rpx;
				border-radius: 50rpx;
			}
		}
		.nav-address{
			font-size: 28rpx;
			color: #777D8A;
			margin-bottom: 82rpx;
		}
		.nav-item{
			&.active{
				color: #F5C249;
				i{
					color:#F5C249;
				}
			}
			// width: 400rpx;
			// padding: 0 30rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 60rpx;
			margin-bottom: 48rpx;
			.nav-item-l{
				display: flex;
				align-items: center;
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight:100;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}
			
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		image{
			width: 40rpx;
			height: 30rpx;
		}
	}
	.menu-right{
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #A7AEBE;
	}
</style>
